<template>
  <div class="container">
    <mt-header title="密码设置">
      <router-link :to="{name: 'mine'}" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
      <mt-button slot="right" @click.native="handleSavePassword">保存</mt-button>
    </mt-header>
    <div class="password-warp">
      <mt-field label="原始密码" placeholder="请输入原始密码" type="password" v-model="passwordReq.oldPassword"></mt-field>
      <mt-field label="新密码" placeholder="请输入新密码" type="password" v-model="passwordReq.newPassword"></mt-field>
      <mt-field label="确认密码" placeholder="请再次输入新密码" type="password" v-model="passwordReq.confirmPassword"></mt-field>
    </div>
  </div>
</template>
<script>
  import { Toast } from 'mint-ui';
  export default{
    data (){
      return {
        passwordReq: {
          oldPassword: '',
          newPassword: '',
          confirmPassword:''
        }
      }
    },
    methods:{
      handleSavePassword(){
        Toast({
          message: '操作成功',
          iconClass: 'mintui mintui-success'
        });
      }
    }
  }
</script>
<style scoped lang="scss">
  @import '../../base/css/base.scss';
  .container{
    background: #F0EFF5;
    height: inherit;
    .password-warp{
      margin: 20px 0;
    }
  }
</style>
